<template>
	<view class="hui b_width">
		<view class="head_box">
			<u-navbar leftIconColor="black" :autoBack="true" title="我的押金" titleStyle="color:black" :placeholder="true"
				bgColor="transparent">
			</u-navbar>
			<view class="left_yuan"></view>
			<view class="right_yuan"></view>
		</view>
		<view class="list_box">
			<view class="b_flex_c info_box" v-for="(item,index) in list" :key="index" @click="$project.toPath('/pages/user/depositList?materials='+item.mark)">
				<image class="img" mode="widthFix" :src="item.icon"></image>
				<view>
					<view class="name">{{item.name}}押金 (元)</view>
				<!-- 	<view v-if="item.price">{{item.price}}</view>
					<view v-else class="wu">暂无缴纳</view> -->
				</view>
			    <view class="tui">我要退押</view> 
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceMeterials,deviceDepositRefund
	} from "@/require/api.js";
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.$project.getNetwork();
			this.getList();
		},
		methods: {
			 refund(item){
				
				let _=this;
				uni.showModal({
					title: '确认是否退还押金?',
					success(res) {
						if (res.confirm) {
				            deviceDepositRefund({id:item.depositId}).then(res=>{
								if(res.code==200){
									 _.$project.toast('操作成功');
									 setTimeout(()=>{
										 _.$project.toBack();
									 },1000) 
								}
							});
						}
					}
				})
			},
			async getList() {
				let {
					data
				} = await deviceMeterials({
					deviceNumber: ''
				});
				this.list = data;
				this.list.forEach(res => {
					res.deposit = Number(res.deposit).toFixed(2);
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-navbar__content__title {
		font-size: 32rpx !important;
		font-weight: bold;
		color: #252B50 !important;
	}

	.list_box {
		box-sizing: border-box;
		padding: 40rpx;
		width: 100%;
		position: relative;
		top: -200rpx;
	}

	.left_yuan {
		width: 200rpx;
		height: 200rpx;
		background: #B6CDFC;
		opacity: 0.6;
		border-radius: 50%;
		position: absolute;
		left: -110rpx;
		top: -50rpx;
	}

	.right_yuan {
		width: 300rpx;
		height: 300rpx;
		background: #B6CDFC;
		position: absolute;
		right: -100rpx;
		top: -75rpx;
		border-radius: 50%;
	}

	.head_box {
		width: 100%;
		height: 370rpx;
		background: linear-gradient(#B6CDFC, #F8F8F8);
	}

	.img {
		width: 100rpx;
		margin-right: 20rpx;
	}

	.info_box {
		background-color: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 35rpx 30rpx;
		margin-bottom: 40rpx;
		color: #252B50;
		font-size: 30rpx;
		font-weight: 500;
	}

	.money {
		margin-left: 20rpx;
	}

	.name {
		margin-bottom: 20rpx;
	}

	.tui {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #3C7CFF;
		border-radius: 26rpx;
		color: #fff;
		text-align: center;
		font-size: 26rpx;
		margin-left: auto;
	}

	.wu {
		color: #9296AF;
	}
</style>